import React, { useEffect, useState, Component, useRef } from 'react';
import { fetchSync, request } from '@/utils/request';
import { history, Link } from 'umi';
import { connect, router } from 'dva';

import enUS from 'antd/es/locale/en_US';
import {
    Menu, Switch, Divider, Checkbox, Button, Row, Col, Tooltip, notification, Skeleton, Avatar, DatePicker,
    Form, Modal, Select, Tree, Icon, Radio, Table, Tag, Pagination, Input, Space, message, Card, Tabs, Collapse, Image, ConfigProvider
} from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined, AudioOutlined, UserOutlined, ArrowRightOutlined, ArrowLeftOutlined } from '@ant-design/icons';

import 'mapbox-gl/dist/mapbox-gl.css';
import styles from './moreActivities.less';
import ItemActivity from './itemActivity';
import moment from 'moment';

let costs = [{
    name: 'Weekly',
    cost: 25
}, {
    name: 'Monthly',
    cost: 75
}, {
    name: 'Year',
    cost: 248
}]
export default (props) => {
    const [selectCost, setSelectCost] = useState(null);
    const [feature, setFeature] = useState({});
    const showmapContainer = useRef(null);
    const echarts8 = useRef(null);
    const commentList = useRef(null);

    const [activities, setActivities] = useState([])
    const [currentActivities, setCurrentActivities] = useState([])
    //初始函数
    useEffect(async () => {
        //此处编写 组件挂载之后和组件重新渲染之后执行的代码
        // qu_data = await fetchSync('/api/fangxun/qu/findAll')
        initActivities()

        return () => {
            //此处编写 组件即将被卸载前执行的代码
        }
        // 4、若传值，但是传的是空数组 []，则表示该useEffect里的内容仅会在“挂载完成后和组件即将被卸载前”执行一次；
    }, [])

    const onFormLayoutChange = (values) => {
        console.log(values)
    };
    const onFinishFilterActivities = (values) => {
        console.log(values)
        // filter 
        const { activityType, name, activityTime } = values;
        let _activities = [...activities]

        _activities = _activities.filter(it => activityType.indexOf(it.activityType) !== -1)
        if (name) {
            _activities = _activities.filter(it => it.name.includes(name))
        }

        if (activityTime) {
            _activities = _activities.filter(it => {
                let cc = activityTime - moment(it.activityTime)
                return cc < 0
            })
        }
        setCurrentActivities(_activities)
    }

    const initActivities = () => {
        request('/api/joy/activity/findAll', {
            method: 'get'
        }).then(res => {
            console.log(res)
            if (res.success) {
                //  sort by time desc
                // let data = res.data.sort((a,b)=>  moment(b.activityTime) - moment(a.activityTime)) 
                setActivities(res.data)
                setCurrentActivities(res.data)
            }
        })
    }

    return (
        <div className={styles.container}>

            <div className={styles.header}>
                <Link to="/runjoy">
                    <Button type="link" style={{ marginTop: 12 }} shape="circle" icon={<ArrowLeftOutlined style={{ color: '#fff', fontSize: 36 }} />} />
                </Link>
                <span className={styles.title}>
                    All Activities
                </span>
            </div>
            <br />

            <Form
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 24,
                }}
                size="default"
                layout="horizontal"
                initialValues={{
                    // size: 'small',
                    activityType: ['Running', 'Cycling', 'SelfDriving'],

                }}
                // onValuesChange={onFormLayoutChange}
                onFinish={onFinishFilterActivities}
                style={{
                    maxWidth: 380,
                }}
            >
                <Form.Item label="Activity Type" name="activityType">
                    <Checkbox.Group options={['Running', 'Cycling', 'SelfDriving']} />
                </Form.Item>
                <Form.Item label="Activity Name" name="name">
                    <Input />
                </Form.Item>
                <ConfigProvider locale={enUS}>
                    <Form.Item label="Start Activity Time" name="activityTime">
                        <DatePicker />
                    </Form.Item>
                </ConfigProvider>
                <Form.Item wrapperCol={{ span: 24, offset: 20 }}>
                    <Button type="primary" htmlType="submit">
                        ok
                    </Button>
                </Form.Item>
            </Form>
            <br />
            <Card bordered={false} bodyStyle={{ padding: 0 }} >
                <ItemActivity data={currentActivities} />
            </Card>
        </div>
    );
}
